<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title>{$page_info.title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {include file="common/header" /}
</head>
<body>
{php}
foreach($filed as $k=>$v){
    if(!isset($v['order_by']) || empty($v['order_by'])){
        $filed[$k]['order_by'] = 0;
    }
}
usort($filed, function($a, $b) {
    return $b['order_by'] <=> $a['order_by'];
});
{/php}
<div class="layui-padding-2">
    <div class="layui-card layui-panel">
        <div class="layui-padding-2">
            <div class="layui-form" >
                <button type="button" id="upload_img" class="layui-hide">图片上传</button>
                {foreach $filed as $value}
                <div class="layui-form-item">
                    <label class="layui-form-label">{$value.title}</label>
                    <div class="layui-input-block layui-input-wrap">
                        {if(in_array($value.type,['text','number','password']))}
                        <input type="{$value.type}" name="{$value.field}" {if(isset($value.verify))}lay-verify="{$value.verify|raw}"{/if} autocomplete="off" {$value.disabled ?? ''} class="layui-input" value="{$value.value ?? ''}">
                        {elseif($value.type === 'textarea')/}
                        <textarea name="{$value.field}" class="layui-textarea" {if(isset($value.verify))}lay-verify="{$value.verify|raw}"{/if} {$value.disabled ?? ''}>{$value.value ?? ''}</textarea>
                        {elseif(in_array($value.type,['radio','checkbox','select']) && isset($value.data))/}
                            {if($value.type === 'radio')}
                                {foreach $value.data as $radio_key=>$radio}
                                <input type="{$value.type}" name="{$value.field}" value="{$radio_key}" {$value.disabled ?? ''} title="{$radio}" {if(isset($value.value)&&$value.value == $radio_key)}checked{/if}>
                                {/foreach}
                            {elseif($value.type === 'select')/}
                            <select name="{$value.field}" {if(isset($value.verify))}lay-verify="{$value.verify|raw}"{/if} lay-search="" {$value.disabled ?? ''}>
                                {foreach $value.data as $select_key=>$select}
                                <option value="{$select_key}" {if(isset($value.value)&&$value.value == $select_key)}selected{/if}>{$select}</option>
                                {/foreach}
                            </select>
                            {elseif($value.type === 'checkbox')/}
                                {foreach $value.data as $checkbox_key=>$checkbox}
                                <input type="{$value.type}" name="{$value.field}[{$checkbox_key}]" {$value.disabled ?? ''} value="{$checkbox_key}" lay-skin="tag" title="{$checkbox}" {if(isset($value.value)&&in_array($checkbox_key,$value.value))}checked{/if}>
                                {/foreach}
                            {/if}
                        {elseif($value.type === 'file_img')/}
                        <input type="hidden" name="{$value.field}" value="{$value.value ?? ''}" id="up_{$value.field}">
                        <div class="layui-upload-drag" style="display: block;" onclick="mor_file_upload('{$value.field}','image')">
                            <i class="layui-icon layui-icon-upload"></i>
                            <div>点击上传，或将图片拖拽到此处</div>
                            <div class="layui-hide" id="img_p_{$value.field}">
                                <hr> <img src="{$value.value ?? ''}" alt="" style="max-width: 100%;height: 100px;width: 300px">
                            </div>
                        </div>
                        {elseif($value.type === 'file')}
                        <input type="text" name="{$value.s_key}" class="layui-input" value="{$value.content}" id="up_{$value.s_key}">
                        <button type="button" class="layui-btn" onclick="mor_file_upload('{$value.field}','file')">
                            <i class="layui-icon layui-icon-upload"></i> 文件上传
                        </button>
                        {elseif($value.type === 'date_time')/}
                        <input type="text" name="{$value.field}" class="layui-input {$table_id}_date_time" {$value.disabled ?? ''} placeholder="yyyy-MM-dd HH:mm:ss" value="{$value.value ?? ''}">
                        {elseif($value.type === 'editor')}
                        <textarea name="{$value.field}" id="{$table_id}_editor_{$value.field}" class="layui-textarea" {if(isset($value.verify))}lay-verify="{$value.verify|raw}"{/if} {$value.disabled ?? ''}>{$value.value ?? ''}</textarea>
                        {/if}
                        <div class="layui-form-mid layui-text-em" style="float: none;">{$value.tips ?? ''}</div>
                    </div>
                </div>
                {/foreach}
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn sys_submit" lay-submit lay-filter="{$table_id}_submit">立即提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__ADMINS__component/layui/layui.js"></script>
<script src="__ADMINS__component/pear/pear.js"></script>
<script src="__ADMINS__tinymce/tinymce.min.js"></script>
<script>
    {foreach $filed as $values}
    {if($values.type === 'editor')}
    tinymce.init({
        selector: 'textarea#{$table_id}_editor_{$values.field}',
        plugins: 'image',
        language:'zh_CN',
        images_upload_url: '{:url("admin/index/upload")}'
    });
    {/if}
        {/foreach}
</script>
<script>
    const mor_up_info = (function () {
        let id;
        let type;
        // 设置全局变量的函数
        function set_up_id(value) {
            id = value;
        }
        function set_up_type(value) {
            type = value;
        }
        // 获取全局变量的函数
        function get_up_id() {
            return id;
        }
        function get_up_type() {
            return type;
        }
        // 暴露公共接口
        return {
            set_up_id,
            set_up_type,
            get_up_id,
            get_up_type
        };
    })();
    layui.use(['form','toast', 'popup'], function() {
        var $ = layui.$;
        var form = layui.form;
        var toast = layui.toast;
        var popup = layui.popup;
        var upload = layui.upload;
        var laydate = layui.laydate;

        form.on('submit({$table_id}_submit)', function(data){
            var field = data.field; // 获取表单字段值
            {foreach $filed as $values}
            {if($values.type === 'editor')}
            field['{$values.field}'] = tinymce.get('{$table_id}_editor_{$values.field}').getContent();
            {/if}
                {/foreach}


            $.post('{:url($operate.add)}',field,function(res){
                if(res.code === 200){
                    popup.success(res.msg, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    });
                }else{
                    toast.error({
                        message: res.msg,
                    });
                }
            })
            return false;
        });
        var up_inst = upload.render({
            elem: '#upload_img',
            accept:'images',
            acceptMime: 'image/*',
            data: {
                type: function(){
                    return mor_up_info.get_up_type();
                }
            },
            url: '{:url("admin/index/upload")}',
            done: function(res){
                if(res.code === 200){
                    toast.success({
                        message: res.msg,
                    });
                    $("#up_"+mor_up_info.get_up_id()).val(res.data.pic_url);
                    $('#img_p_'+mor_up_info.get_up_id()).removeClass('layui-hide').find('img').attr('src', res.data.pic_url);
                }else{
                    toast.error({
                        message: res.msg,
                    });
                }
            }
        });
        laydate.render({
            elem: '.{$table_id}_date_time',
            type: 'datetime'
        });
        form.render();
    })
    function mor_file_upload(id,type) {
         mor_up_info.set_up_id(id);
         mor_up_info.set_up_type(type);
         var upload_btn = document.getElementById("upload_img");
         upload_btn.click();
    }
</script>
</body>
</html>